import React, { Component } from 'react';

/**
 * 类别选项按钮
 */
class CategoryButton extends Component {

    constructor(props, context) {
        super(props, context);
        let categorys = JSON.parse(localStorage.getItem('category_list'))
        this.state = {
            categorys: categorys
        }
    }

    handleClickCategory(i) {
        this.props.handleClickCategory(i)
    }

    render() {
        return (
            <div style={styles.root}>
                {
                    this.state.categorys.map((category, index) => {
                        return (
                            <div key={category.title} style={styles.div_button}
                                className="button"
                                onClick={this.handleClickCategory.bind(this, index)}>
                                <p>{category.title}</p>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default CategoryButton;

const buttonPadding = 50
const button_width = (document.documentElement.clientWidth - buttonPadding) / 4
const styles = {
    root: {
        height: '36px',
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '10px',
        marginBottom: '10px'
    },
    div_button: {
        border: '1px solid #E0E0E0',
        borderRadius: '5px',
        height: '24px',
        marginLeft: '5px',
        marginRight: '5px',
        width: button_width,
        fontSize: '12px',
        color: '#757575',
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex'
    }
}